<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
  <!-- 统一路径基准（与编辑页面保持一致，避免路径错误） -->
  <base href="/oa1/" />
  <title>添加名片</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入依赖样式 -->
  <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">
  <!-- 引入依赖脚本 -->
  <script src="static/jquery/jquery-1.10.2.min.js"></script>
  <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">添加名片</h4>
  </div>
  <div class="panel-body">
    <!-- 表单提交路径与控制器@RequestMapping一致 -->
    <form action="mp/contact/addMpContact" id="myform" method="post" class="form-horizontal" role="form">

      <!-- 第一行：姓名 + 性别 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="name" class="col-md-4 control-label">姓名</label>
          <div class="col-md-8">
            <input type="text" id="name" name="name" class="form-control"
                   value="${contact.name}" placeholder="请输入姓名">
          </div>
        </div>
        <div class="form-group col-md-6">
          <label class="col-md-4 control-label">性别</label>
          <div class="col-md-8">
            <label class="radio-inline">
              <input type="radio" name="sex" value="M" ${contact.sex == 'M' ? 'checked' : ''}>男
            </label>
            <label class="radio-inline">
              <input type="radio" name="sex" value="F" ${contact.sex == 'F' ? 'checked' : ''}>女
            </label>
          </div>
        </div>
      </div>

      <!-- 第二行：名片夹 + 公司名称 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="typeid" class="col-md-4 control-label">名片夹</label>
          <div class="col-md-8">
            <select name="typeid" class="form-control" id="typeid">
              <option value="">--请选择--</option>
              <!-- 循环当前员工的名片类型（与后端toAddMpContact方法返回的cardtypes对应） -->
              <c:forEach items="${cardtypes}" var="t">
                <option value="${t.oid}" ${contact.typeid == t.oid ? 'selected' : ''}>${t.type}</option>
              </c:forEach>
            </select>
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="company" class="col-md-4 control-label">公司名称</label>
          <div class="col-md-8">
            <input type="text" id="company" name="company" class="form-control"
                   value="${contact.company}" placeholder="请输入公司名称">
          </div>
        </div>
      </div>

      <!-- 第三行：家庭电话 + 办公电话 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="homePhone" class="col-md-4 control-label">家庭电话</label>
          <div class="col-md-8">
            <input type="text" id="homePhone" name="homePhone" class="form-control"
                   value="${contact.homePhone}" placeholder="请输入家庭电话（例：010-12345678或13800138000）">
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="officePhone" class="col-md-4 control-label">办公电话</label>
          <div class="col-md-8">
            <input type="text" id="officePhone" name="officePhone" class="form-control"
                   value="${contact.officePhone}" placeholder="请输入办公电话（例：010-12345678或13800138000）">
          </div>
        </div>
      </div>

      <!-- 第四行：家庭地址 + 办公地址 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="homeAddress" class="col-md-4 control-label">家庭地址</label>
          <div class="col-md-8">
            <input type="text" id="homeAddress" name="homeAddress" class="form-control"
                   value="${contact.homeAddress}" placeholder="请输入家庭地址（限50字以内）">
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="officeAddress" class="col-md-4 control-label">办公地址</label>
          <div class="col-md-8">
            <input type="text" id="officeAddress" name="officeAddress" class="form-control"
                   value="${contact.officeAddress}" placeholder="请输入办公地址（限50字以内）">
          </div>
        </div>
      </div>

      <!-- 第五行：家庭邮编 + 办公邮编 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="homeZipcode" class="col-md-4 control-label">家庭邮编</label>
          <div class="col-md-8">
            <input type="text" id="homeZipcode" name="homeZipcode" class="form-control"
                   value="${contact.homeZipcode}" placeholder="请输入6位家庭邮编（例：100000）">
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="officeZipcode" class="col-md-4 control-label">办公邮编</label>
          <div class="col-md-8">
            <input type="text" id="officeZipcode" name="officeZipcode" class="form-control"
                   value="${contact.officeZipcode}" placeholder="请输入6位办公邮编（例：100000）">
          </div>
        </div>
      </div>

      <!-- 第六行：个人邮箱 + 办公邮箱 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="email1" class="col-md-4 control-label">个人邮箱</label>
          <div class="col-md-8">
            <input type="text" id="email1" name="email1" class="form-control"
                   value="${contact.email1}" placeholder="请输入个人邮箱（例：xxx@qq.com）">
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="email2" class="col-md-4 control-label">办公邮箱</label>
          <div class="col-md-8">
            <input type="text" id="email2" name="email2" class="form-control"
                   value="${contact.email2}" placeholder="请输入办公邮箱（例：xxx@company.com）">
          </div>
        </div>
      </div>

      <!-- 第七行：其它信息 + 个人电话 -->
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="other" class="col-md-4 control-label">其它信息</label>
          <div class="col-md-8">
            <textarea class="form-control" id="other" name="other" rows="5"
                      placeholder="请输入其它补充信息（限200字以内）">${contact.other}</textarea>
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="mobile" class="col-md-4 control-label">个人电话</label>
          <div class="col-md-8">
            <input type="text" id="mobile" name="mobile" class="form-control"
                   value="${contact.mobile}" placeholder="请输入个人电话（例：010-12345678或13800138000）">
          </div>
        </div>
      </div>

      <!-- 按钮行：返回 + 提交 + 重置 -->
      <div class="col-md-12">
        <div class="form-group col-md-12">
          <div class="col-md-10 col-md-offset-2">
            <a href="javascript:history.back()" class="btn btn-info">返回</a>
            <button type="submit" class="btn btn-success">提交信息</button>
            <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 表单验证脚本 -->
<script type="text/javascript">
  $(document).ready(function() {
    // 初始化BootstrapValidator表单验证
    $("#myform").bootstrapValidator({
      message: '该值无效',
      feedbackIcons: { // 输入状态图标
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        // 1. 姓名（必填，2-20字）
        name: {
          validators: {
            notEmpty: { message: '姓名不能为空' },
            stringLength: { min: 2, max: 20, message: '姓名长度需在2-20位' }
          }
        },
        // 2. 性别（必填）
        sex: {
          validators: {
            notEmpty: { message: '请选择性别' }
          }
        },
        // 3. 名片夹（必填）
        typeid: {
          validators: {
            notEmpty: { message: '请选择所属名片夹' }
          }
        },
        // 4. 公司名称（必填，2-20字）
        company: {
          validators: {
            notEmpty: { message: '公司名称不能为空' },
            stringLength: { min: 2, max: 20, message: '公司名称长度需在2-20位' }
          }
        },
        // 5. 家庭电话（可选，支持固话/手机号格式）
        homePhone: {
          validators: {
            regexp: {
              regexp: /^(^(\d{3,4}-)?\d{7,8})$|^((1[3-9][0-9]\d{8}$))$/,
              message: '电话格式不正确（例：010-12345678或13800138000）'
            }
          }
        },
        // 6. 办公电话（可选，同家庭电话格式）
        officePhone: {
          validators: {
            regexp: {
              regexp: /^(^(\d{3,4}-)?\d{7,8})$|^((1[3-9][0-9]\d{8}$))$/,
              message: '电话格式不正确（例：010-12345678或13800138000）'
            }
          }
        },
        // 7. 个人电话（可选，同上述格式）
        mobile: {
          validators: {
            regexp: {
              regexp: /^(^(\d{3,4}-)?\d{7,8})$|^((1[3-9][0-9]\d{8}$))$/,
              message: '电话格式不正确（例：010-12345678或13800138000）'
            }
          }
        },
        // 8. 个人邮箱（可选，需符合邮箱格式）
        email1: {
          validators: {
            emailAddress: { message: 'E-mail格式不正确（例：xxx@qq.com）' }
          }
        },
        // 9. 办公邮箱（可选，同个人邮箱格式）
        email2: {
          validators: {
            emailAddress: { message: 'E-mail格式不正确（例：xxx@company.com）' }
          }
        },
        // 10. 家庭邮编（可选，6位数字）
        homeZipcode: {
          validators: {
            regexp: {
              regexp: /^[1-9]\d{5}$/,
              message: '邮编格式不正确（需6位数字，例：100000）'
            }
          }
        },
        // 11. 办公邮编（可选，同家庭邮编格式）
        officeZipcode: {
          validators: {
            regexp: {
              regexp: /^[1-9]\d{5}$/,
              message: '邮编格式不正确（需6位数字，例：100000）'
            }
          }
        },
        // 12. 家庭地址（可选，限50字）
        homeAddress: {
          validators: {
            stringLength: { max: 50, message: '家庭地址不能超过50字' }
          }
        },
        // 13. 办公地址（可选，限50字）
        officeAddress: {
          validators: {
            stringLength: { max: 50, message: '办公地址不能超过50字' }
          }
        },
        // 14. 其它信息（可选，限200字）
        other: {
          validators: {
            stringLength: { max: 200, message: '其它信息不能超过200字' }
          }
        }
      },
      // 验证通过后提交表单
      submitHandler: function(validator, form, submitButton) {
        validator.defaultSubmit();
      }
    });

    // 重置按钮：清空表单并重置验证状态
    $("#resetbtn").click(function() {
      $("#myform").data("bootstrapValidator").resetForm();
    });
  });

  $(document).ajaxError(function(event, xhr) {
    if (xhr.status == "403") { // 无权限时跳转
      document.location.href = xhr.getResponseHeader("url");
    } else if (xhr.status != "200") { // 其他错误提示
      console.log("服务器错误，状态码：" + xhr.status);
      alert("服务器错误，请重试！");
    }
  });
</script>
</body>
</html>